<template>
    <div>
        <div class="filter-container">
            <el-form label-position="left" :inline="true">
                <!--                <el-form-item label="渠道类型">-->
                <!--                    <select-app-source-type v-model="search.source_type" :multiple="false" :clearable="false"></select-app-source-type>-->
                <!--                </el-form-item>-->
                <el-form-item label="渠道">
                    <select-app-source v-model="search.source" :type="search.source_type" :multiple="true" :clearable="false"></select-app-source>
                </el-form-item>
                <el-form-item label="日期" prop="day">
                    <el-date-picker
                        :clearable="false"
                        v-model="search.day"
                        type="daterange"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期"
                        style="width: 210px;">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="">
                    <el-button class="filter-item" icon="el-icon-search" type="primary" :loading="loading" @click="initSearch()">搜索</el-button>
                    <el-button class="filter-item" @click="exportExcel" v-if="$ENABLE_EXPORT">导出本页</el-button>
                </el-form-item>
            </el-form>
        </div>

        <el-col :lg="12">
            <vxe-table
                :loading="loading"
                ref="xTable"
                highlight-hover-row
                style="width: 100%"
                class="text-center"
                show-footer
                :footer-method="footerMethod"
                :max-height="maxHeight">
                <vxe-table-column title="渠道" field="source" formatter="formatAppSourceName" min-width="150" fixed="left" show-overflow/>
                <vxe-table-column title="日期" field="day" width="100" fixed="left" sortable sort-by="day"/>
                <vxe-table-column title="注册人数" field="registerUser" formatter="formatHuman" min-width="80"/>
                <vxe-table-column title="新增充值人数" field="payFirstUser" formatter="formatHuman" min-width="100"/>
                <vxe-table-column title="新增充值金额" field="payFirst" formatter="formatHumanRmb" min-width="120"/>
                <vxe-table-column title="充值金额" field="pay1" formatter="formatHumanRmb" min-width="90"/>
                <vxe-table-column title="系数" field="scale" min-width="110"/>
                <vxe-table-column title="结算金额" field="spreadCost" formatter="formatHumanRmb" min-width="110"/>
            </vxe-table>

            <el-pagination
                class="pull-right"
                background
                :current-page.sync="pageNo"
                :page-sizes="pageOptions.pageSizesList"
                :page-size="pageSize"
                :layout="pageOptions.layout"
                :total="totalDataNumber"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange">
            </el-pagination>
        </el-col>

    </div>
</template>

<script>

export default {
    data() {
        return {
            search: {
                source: '',
                day: [],
            },
            loading: false,
            selected: [],
            tableData: [],
            pageNo: 1,
            pageSize: 100,
            totalDataNumber: 0,
            pageOptions: this.$store.state.backend.pageOptions,
        }
    },
    computed: {
        maxHeight() {
            return this.$store.state.backend.windowInnerHeight - 240;
        },
    },
    methods: {
        handleSizeChange(val) {
            this.pageNo = 1;
            this.pageSize = parseInt(`${val}`);
            this.handleSearch();
        },
        handleCurrentChange(val) {
            this.pageNo = parseInt(`${val}`);
            this.handleSearch();
        },
        handleSelectionChange(val) {
            this.selected = val;
        },
        handleSearch() {
            this.loading = true;
            let filter = Object.assign({}, this.search, {
                page: this.pageNo,
                pageSize: this.pageSize,
            });
            this.$store.dispatch('spreadData/DailyAgent', filter).then(({data}) => {
                this.$refs.xTable.reloadData(data.data);
                this.totalDataNumber = data.meta.total;
            }).finally(() => {
                this.loading = false;
            });
        },
        initData() {
            this.initSearchDate();
            this.handleSearch();
        },
        initSearchDate() {
            this.search.day = [
                moment().format('yyyy-MM-DD'),
                moment().format('yyyy-MM-DD')
            ];
        },
        initSearch() {
            this.pageNo = 1;
            this.handleSearch();
        },
        exportExcel () {
            this.$refs.xTable.exportData({
                filename: '推广数据-' + this.$route.meta.title,
                type: 'xlsx'
            });
        },
        footerMethod({ columns, data }) {
            return this.$helper.vxeFooter(columns, data, (index, property) => {
                return index < 2 || property === 'scale';
            });
        },
    },
    created() {
        this.initData();
    }
}
</script>

<style lang="scss" scoped>
#app .el-form-item {
    margin-bottom: 0;
}
</style>

